import { cloneDeep } from 'lodash-es'
import { useFormModel } from '@/hooks'
import SelectTag from './SelectTag.vue'
import { useTemplateRef } from 'vue'
import { Input, Tooltip } from '@arco-design/web-vue'
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon'

export function useFormConfig() {
    const formEl = useTemplateRef<FormInstance>('form')

    const fields: FormFields = [
        {
            type: 'remoteSearchSelect',
            field: 'remote',
            label: '远程',
            fieldProps: {
                multiple: true
            },
            query(searchValue) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve(
                            ['option1', 'option2', 'option3'].map(item => ({
                                label: `${item}--${searchValue}`,
                                value: `${item}--${searchValue}`
                            }))
                        )
                    }, 800)
                })
            }
        },
        {
            type: 'input',
            field: 'name',
            formItemProps: {
                rules: {
                    required: true,
                    validator: (value, cb) => {
                        if (!value) {
                            cb('用户名不能为空')
                        } else {
                            cb()
                        }
                    }
                },
                slots: {
                    label: model => <span class={!model.name ? 'text-red' : ''}>用户名</span>,
                    extra: model => <span class="text-#f00">{model.name}</span>
                },
                tooltip: `订单核销：由「订单核销」触发的资金明细，如订单确认收货等场景；`
            },
            fieldProps: {
                placeholder: '请输入用户名',
                slots: {
                    suffix: () => <span class="text-purple">后缀</span>,
                    prefix: () => <span class="text-purple">前缀</span>
                }
            },
            renderDepend({ model }) {
                return model.select !== '1'
            }
        },
        {
            type: 'inputSearch',
            field: 'search',
            label: '搜索',
            initValue: '123'
        },
        {
            type: 'inputPassword',
            field: 'password',
            label: '密码',
            initValue: '123'
        },
        {
            type: 'switch',
            field: 'switch',
            label: '开关',
            initValue: true
        },
        {
            type: 'rate',
            field: 'rate',
            label: '评分',
            fieldProps: {
                allowHalf: true,
                onChange() {
                    formEl?.value?.validateField('name')
                }
            }
        },
        {
            type: 'checkboxGroup',
            field: 'checkboxGroup',
            label: '复选框',
            fieldProps: {
                options: [
                    { label: '选项一', value: '1' },
                    { label: '选项二', value: '2' }
                ],
                max: 1
            }
        },
        {
            type: 'radioGroup',
            field: 'radioGroup',
            label: '单选框',
            initValue: '1',
            fieldProps: {
                options: [
                    { label: '选项一', value: '1' },
                    { label: '选项二', value: '2' }
                ]
            }
        },
        {
            type: 'colorPicker',
            field: 'colorPicker',
            label: '颜色选择',
            initValue: '#ccc',
            fieldProps: {
                showText: true
            }
        },
        {
            type: 'timePicker',
            field: 'timePicker',
            label: '时间选择器'
        },
        {
            type: 'datePicker',
            field: 'datePicker',
            label: '日期选择器',
            initValue: '2021-08-30',
            fieldProps: {
                style: { width: '100%' }
            }
        },
        {
            type: 'treeSelect',
            field: 'treeSelect',
            label: '树选择器',
            query() {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            {
                                key: '1',
                                title: '1',
                                children: [
                                    { key: '2', title: '2' },
                                    { key: '3', title: '3' }
                                ]
                            },
                            {
                                key: '4',
                                title: '4',
                                children: [{ key: '5', title: '5' }]
                            }
                        ])
                    }, 100)
                })
            }
        },
        {
            type: 'slider',
            field: 'slider',
            label: '滑块'
        },
        {
            type: 'select',
            field: 'select',
            initValue: '2',
            label: '选择',
            formItemProps: {
                rules: {
                    required: true,
                    message: '请选择呢',
                    type: 'string'
                }
            },
            fieldProps: {
                placeholder: '请选择呢',
                allowSearch: true,
                allowClear: true,
                // @ts-ignore
                onChange(value, item) {
                    // eslint-disable-next-line no-console
                    console.log('🚀 ~ value, item:', value, item)
                }
            },
            query() {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            {
                                label: '我是第一选择',
                                value: '1',
                                storeId: '2234234',
                                render() {
                                    return <div>我是自定义的1</div>
                                }
                            },
                            {
                                label: '我是第二选择',
                                value: '2',
                                storeId: '234234234',
                                render() {
                                    return <div>我是自定义的2</div>
                                }
                            }
                        ])
                    }, 3000)
                })
            }
        },
        {
            type: 'inputNumber',
            field: 'price',
            formItemProps: {
                rules: {
                    required: true,
                    message: '金额不能为空'
                },
                slots: {
                    extra: model => (
                        <div class={model.select === '1' ? 'text-#f00' : 'text-purple'}>
                            这是一个测试的呢，哈哈哈
                        </div>
                    ),
                    label: () => (
                        <div class="flex items-center">
                            <div>自定义</div>
                            <Tooltip
                                v-slots={{
                                    content: () => {
                                        return (
                                            <div>
                                                <p>
                                                    订单核销：由「订单核销」触发的资金明细，如订单确认收货等场景；
                                                </p>
                                                <p>
                                                    退款暂封：售后单由商家同意退款或超时自动退款后将触发此条资金明细，暂封退款金额并从账户余额中扣除；
                                                </p>
                                                <p>
                                                    退款解封：暂封的退款金额退款成功后，触发「退款解封」以及「退款成功记账」的资金明细；
                                                </p>
                                                <p>
                                                    退款成功记账：暂封的退款金额退款成功后，触发「退款解封」以及「退款成功记账」的资金明细；
                                                </p>
                                                <p>
                                                    技术服务费：订单核销后将实时计算服务费金额，并触发此条资金明细，服务费收取规则可咨询平台运营人员；
                                                </p>
                                                <p>
                                                    商户结算：根据结算周期发起商家结算时，触发此条资金明细；
                                                </p>
                                                <p>
                                                    结算退票：为商家结算失败将触发此条资金明细，请联系平台运营人员核实；
                                                </p>
                                            </div>
                                        )
                                    }
                                }}
                            >
                                <IconQuestionCircle class="ml-3 text-#ccc" />
                            </Tooltip>
                        </div>
                    )
                }
            },
            fieldProps: {
                precision: 2,
                slots: {
                    prefix: () => <>满</>,
                    suffix: () => <>元</>
                }
            }
        },
        {
            type: 'uploadImg',
            field: 'fileList',
            span: 16,
            label: '图片上传',
            initValue: [
                'https://drug-platform.cdn.bcebos.com/online/drug/d1689948080778174209.png'
            ],
            formItemProps: {
                rules: {
                    required: true,
                    message: '请上传文件',
                    type: 'array'
                }
            },
            fieldProps: {
                limit: 4,
                maxSize: 0.2
            }
        },
        {
            field: 'renderField',
            label: 'renderField',
            renderField({ model }) {
                return (
                    <Input
                        v-model={model.renderField}
                        placeholder="渲染表单元素"
                    />
                )
            }
        },
        {
            type: 'cRangePicker',
            field: ['startTime', 'endTime'],
            label: '时间选择',
            initValue: ['2001-09-01', '2001-09-10'],
            formItemProps({ model }) {
                return {
                    rules: {
                        required: true,
                        validator: (_, cb) => (!model.startTime ? cb('请选择时间') : cb())
                    }
                }
            },
            fieldProps: {
                // @ts-ignore
                placeholder: ['开始时间', '结束时间'],
                allowClear: true
            }
        },
        {
            field: 'tags',
            label: '城市选择',
            initValue: ['北京'],
            formItemProps({ model }) {
                return {
                    rules: {
                        required: true,
                        validator: (_, cb) => {
                            if (!model.tags?.length) {
                                cb('请选择城市')
                            } else {
                                cb()
                            }
                        }
                    }
                }
            },
            renderField: ({ model }) => <SelectTag v-model={model.tags} />
        }
    ]
    const formModel = useFormModel(fields)
    const initModel = cloneDeep(formModel)

    return {
        formEl,
        formModel,
        fields,
        initModel
    }
}
